<!doctype html>
<html lang="en">
<head>
<title>CPK周期趋势图</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="CPK趋势图">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<script type="text/javascript" src="../../script/mes-import.js"></script>
<script type="text/javascript" src="../../script/js/echart/echarts.min.js"></script>
<style>
	.reportTable{
		float: left;
		width: 30%;
		height: 30%;
		margin-left: 5px;
		margin-top: 5px;
	}
	.reportTable .title{
		border: 1px solid black;
		padding-left: 5px;
	}
	.reportTable .itemPanel{
		border: 1px solid black;
		padding-left: 5px;
		height: 100px;
	}
	.reportTable .itemPanel p{
		margin-top: 2px;
	}
</style>
</head>

<body id="efficiencyReport" style="background: white;">
<form class="layui-form layui-form-pane">
	<div style="width: 100%;margin:0 auto;">
		<div style="margin-top: 20px;">
			<div id="visualization" style="width: 80%;height:400px;background: white;margin: auto;float: left"></div>
			<div id="configButton" style="width: 10%;height:400px;background: white;margin: auto;float: left">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label input-lab">时间范围</label> 
						<div class="layui-input-inline">
							<input type="text" class="layui-input input-cls" style="width: 200px;" id="searchDate" name="searchDate" readonly="readonly">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label input-lab">类型</label> 
						<div class="layui-input-inline">
							<select id="searchType" v-model="searchType" lay-filter="searchType">
								<option value="1" selected="selected">按天</option>
								<option value="2">按小时</option>
							</select>
						</div>
					</div>
				</div>
				<div class="layui-form-item" v-show="searchType==2">
					<div class="layui-inline">
						<label class="layui-form-label input-lab" style="width: 150px;">周期（小时）</label> 
						<div class="layui-input-inline">
							<select id="cycleHour" name="cycleHour" lay-filter="cycleHour">
								<option value="{{item+1}}" v-for="(item,index) in 24">{{item+1}}</option>
							</select>
						</div>
					</div>
				</div>
				<div class="layui-form-item" style="display: none;">
					<div class="layui-inline">
						<label class="layui-form-label input-lab">设备</label> 
						<div class="layui-input-inline">
							<input type="text" class="layui-input input-cls" style="width: 200px;" id="remark1" name="remark1">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label input-lab">位置</label> 
						<div class="layui-input-inline">
							<input type="text" class="layui-input input-cls" style="width: 200px;" id="remark2" name="remark2">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label input-lab">管号</label> 
						<div class="layui-input-inline">
							<input type="text" class="layui-input input-cls" style="width: 200px;" id="remark3" name="remark3">
						</div>
					</div>
				</div>
				<a class="layui-btn layui-btn-normal" @click="doSearchData">查询</a>
			</div>
		</div>
	</div>
</form>
<script type="text/javascript">
	var myChart = echarts.init(document.getElementById("visualization"));
	var vm = new Vue({
		el : "#efficiencyReport",
		data : {
			tableData:[],
			searchDate:"",
			searchType:"",
			cycleHour:"1",
			remark1:"",
			remark2:"",
			remark3:""
		}
		,init:function(){
			this.$nextTick(function() {
                this.$options.methods.searchData(this);
			});
		}
		,methods: {
            resizeChart:function(){
                myChart.resize();
            }
            ,renderTable:function(_self,data){
				layui.use(['form','table','laydate'], function() {
                        var table = layui.table;
                        var laydate = layui.laydate;
                        var form = layui.form;
					    laydate.render({
						    elem: '#searchDate' //指定元素
						    ,range:'~'
						    ,type:'date'
					    });
					    
					    form.on('select(searchType)', function(data){
						  _self.searchType=data.value;
						});  
						form.on('select(cycleHour)', function(data){
						  _self.cycleHour=data.value;
						});  
                        _self.$options.methods.drawPie(_self, data);
                    }
				);
			}
			,searchData:function(_self){
				_self = _self.target ? this : _self;
				var loadIndex;
				layui.use('layer', function(){
					var layer = layui.layer;
					loadIndex = layer.load(1);
				});
				_self.$nextTick(function() {
                    var configId = window.parent.vm.configId;
                    var scDate = '';
					this.$http.post("../../spc/chartView/cpkCyclePredit",{
                        configId:configId,
                        scDate:scDate,
                        searchDate:_self.searchDate,
                        searchType:_self.searchType,
                        cycleHour:_self.cycleHour,
                        remark1:_self.remark1,
                        remark2:_self.remark2,
                        remark3:_self.remark3
					},{emulateJSON: true}).then(function(res){
						_self.tableData = res.body;
						_self.$options.methods.renderTable(_self,res.body);
						layer.close(loadIndex);
					});
				});
			}
			,doSearchData:function(_self){
				_self = _self.target ? this : _self;
				var searchDate = $("#searchDate").val();
				var searchType = $("#searchType").val();
				var remark1 = $("#remark1").val();
				var remark2 = $("#remark2").val();
				var remark3 = $("#remark3").val();
				_self.searchDate = searchDate;
				_self.searchType = searchType;
				_self.remark1 = remark1;
				_self.remark2 = remark2;
				_self.remark3 = remark3;
				_self.$options.methods.searchData(_self);
			}
			,renderForm:function(){
				layui.use('form',function(){
					layui.form.render('select');
				});
			}
			,drawPie:function(_self,data){
				var cpkArray = data.cpkArray;
                var xdata = [];
                /*
                for(var i in cpkArray){
                    xdata.push(parseInt(i)+1);
                }
                */
                xdata = data.dateArray;
                var avgMarkLine = {
                    data: [
                        {name: '2.00',yAxis:2.0,lineStyle:{color:'#0ff'}},
                        {name: '1.67',yAxis:1.67,lineStyle:{color:'#0f0'}},
                        {name: '1.33',yAxis:1.33,lineStyle:{color:'#fb0'}},
                        {name: '1.00',yAxis:1.0,lineStyle:{color:'#00f'}},
                        {name: '0.67',yAxis:0.67,lineStyle:{color:'#f00'}}
                    ],
                    label: {
                        normal: {
                            formatter: '{b}',
                            textStyle: {
                                align: 'top'
                            }
                        }
                    }
                };

                var seriesData = [
                    {
                        name:'CPK周期趋势图',
                        type:'line',
                        data:cpkArray,
						markLine:avgMarkLine
                    }
                ];
				myChart.clear();
                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {},
                    xAxis: [
                        {
                            type: 'category',
							data:xdata,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: 'CPK',
                            axisLabel: {
                                formatter: '{value}'
                            }
                        }
                    ],
                    dataZoom: [
                        {
                            type: 'inside',
                            start: 0,
                            end: 100
                        },
                        {
                            show: false,
                            type: 'slider',
                            y: '98%',
                            start: 0,
                            end: 100
                        }
                    ],
                    series:seriesData
                };



				myChart.setOption(option);
			}
		}
		,watch: {

		}
	});
</script>
</body>
</html>
